<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>套餐列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
<!--    弹出的修改套餐的表格-->
    <el-dialog title= "修改套餐"  :visible.sync="dialogVisible">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="editForm.name" type="text"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="updateForm('editForm')">修改套餐</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>





    <el-card style="float: left ;width: 500px;height: 100%;margin: 10px">
      <el-divider content-position="left">套餐表格</el-divider>
      <el-button  icon="el-icon-edit"
                  type="warning"  @click="openAddNewDialog()">添加套餐</el-button>

      <!--弹出的新增套餐的表格-->
      <el-dialog title= "新增套餐"  :visible.sync="addNewFormVisible">
        <el-form :model="addNewForm" :rules="rules" ref="addNewForm" >
          <el-form-item label="套餐名称" prop="name" :label-width="formLabelWidth">
            <el-input v-model="addNewForm.name"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="warning" @click="addNewsubmitForm('addNewForm')">新增套餐</el-button>
          <el-button @click="addNewFormVisible = false">取 消</el-button>
        </div>

      </el-dialog>



      <!--  套餐表格  -->


      <el-table  ref="multipleTable"
                 tooltip-effect="dark"
                 style="width: 100%"
                 border
                 :data="foodPackageArr">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :index="indexMethodFP" type="index" label="编号"></el-table-column>
        <el-table-column label="套餐名称" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="danger" round  @click="openFoodPackageInfo(scope.row)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <!--自定义列必须添加template标签 以及slot-scope="scope"
          scope是定义的一个变量名称, 此变量里面装着当前行的相关信息
          scope.$index当前行对应的数组下标
          scope.row当前行对应的数组里面的对象
          -->
          <template slot-scope="scope">
            <el-button size="mini" type="warning"
                       @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="info" icon="el-icon-delete"
                       @click="openDeleteConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin: 0 auto">
        <el-pagination style="margin: 0 auto"
            background
            @size-change="handleSizeChangeFP"
            @current-change="handleCurrentChangeFP"
            :current-page="reformPageFP.page"
            :page-sizes="[10,20,30]"
            :page-size="reformPageFP.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalFP">
        </el-pagination>
      </div>



    </el-card>

    <!--弹出的新增套餐餐品关联的表格-->
    <el-dialog title= "新增套餐餐品关联"  :visible.sync="addNewFormLinkVisible">
      <el-form :model="addNewLinkForm" :rules="rules" ref="addNewLinkForm" >
        <el-form-item label="餐品选择" prop="foodId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodId">
            <el-option v-for="c in foodArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addNewLinkForm.foodPackageId">
            <el-option v-for="c in foodPackageArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间选择" prop="meal" :label-width="formLabelWidth">
          <el-select v-model="addNewLinkForm.meal" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="warning" @click="addNewsubmitLinkForm('addNewLinkForm')">新增套餐餐品关联</el-button>
        <el-button @click="addNewFormLinkVisible = false">取 消</el-button>
      </div>



    </el-dialog>


    <!--  套餐餐品关联表格  -->
    <el-card style="float: left ;width: 1000px;height: 100%;margin: 10px">
      <el-divider content-position="left">套餐餐品表格</el-divider>

      <el-button  icon="el-icon-edit"
                  type="warning"  @click="openAddNewLinkDialog()">添加套餐餐品</el-button>
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          border
          :data="foodPackageLinkArr">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :index="indexMethodFPL" type="index" label="编号"></el-table-column>
        <el-table-column prop="foodPackageName" label="套餐名称"></el-table-column>
        <el-table-column prop="foodName" label="餐品名称"></el-table-column>
        <el-table-column prop="price" label="餐品价格"></el-table-column>
        <el-table-column label="餐品图片">
          <!--如果表格的列显示的内容不是来自于数组里面对象的属性,而是显示一些
          其它的标签组成的内容时,需要自定义列-->
          <!--自定义列 必须添加template标签-->

          <template slot-scope="scope">
            <img :src="require('../../../assets/food/' +scope.row.foodUrl)" width="50">
          </template>
        </el-table-column>
        <el-table-column prop="foodPackageLinkMeal" label="餐品种类"></el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning"
                       @click="openEditLinkDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="info" icon="el-icon-delete"
                       @click="openDeleteLinkConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="">
        <el-pagination style="text-align: center"
            background
            @size-change="handleSizeChangeFPL"
            @current-change="handleCurrentChangeFPL"
            :current-page="reformPageFPL.page"
            :page-sizes="[10,20,30]"
            :page-size="reformPageFPL.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalFPL">
        </el-pagination>
      </div>


    </el-card>

    <!--    弹出的修改套餐餐品关联的表单-->

    <el-dialog title= "修改套餐餐品关联"  :visible.sync="dialogLinkVisible">
      <el-form :model="editLinkForm" :rules="rules" ref="editLinkForm" label-width="80px">
        <el-form-item label="餐品选择" prop="foodId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="editLinkForm.foodId">
            <el-option v-for="c in foodArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="套餐选择" prop="foodPackageId" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="editLinkForm.foodPackageId">
            <el-option v-for="c in foodPackageArr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间选择" prop="meal" :label-width="formLabelWidth">
          <el-select v-model="editLinkForm.meal" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="updateLinkForm('editLinkForm')">修改关联</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-dialog title= "套餐信息"  :visible.sync="foodPackageInfoVisible">
      <el-row gutter="15" style="text-align: center">
        <el-col span="8" v-for="item in foodPackageInfo">
          <div style="width: 230px; text-align: center; margin-bottom: 30px">
            <img style="border-radius: 50%;margin: 0 auto;border-color: #E6A23C;border-style: solid;border-width: 3px" :src="require('../../../assets/food/'+item.foodUrl)" width="100" height="100"/>
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.foodName}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #bdbcb1">价格(元):{{item.foodPrice}}</p>
            <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.meal}}</p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>




  </div>

</template>

<script>
export default {
  name: "FoodPackageListView",
  data: function () {
    return {
      reformPageFP:{ page:1,
        pageSize:10},
      totalFP:10,

      reformPageFPL:{ page:1,
        pageSize:10},
      totalFPL:10,

      foodPackageInfoVisible:false,
      editLinkForm:'',
      foodPackageInfo:[],
      foodPackageArr:[],
      foodArr:[],
      foodPackageLinkArr:[],
      editForm:[],
      addNewFormVisible : false,
      addNewFormLinkVisible : false,
      dialogLinkVisible:false,
      addNewLinkForm:{},
      options: [{value: '早餐', label: '早餐'}, {value: '午餐', label: '午餐'}, {value: '晚餐', label: '晚餐'}],

      addNewForm:{name:''},
      formLabelWidth: '120px',
      rules: {
        name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
        foodId:[{ required: true, message: '请输入食物名称', trigger: 'blur' }],
        foodPackageId:[{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
        meal:[{ required: true, message: '请输入餐品使用时间', trigger: 'blur' }],
      },
      dialogVisible:false,
    }
  },
  methods: {
    indexMethodFP(index)
    {
      return (this.reformPageFP.page-1)*this.reformPageFP.pageSize+index+1;
    },
    indexMethodFPL(index)
    {
      return (this.reformPageFPL.page-1)*this.reformPageFPL.pageSize+index+1;
    },
    handleSizeChangeFPL(val) {
      this.reformPageFPL.pageSize =val;
      this.loadFoodPackageLinkList();
    },
    handleCurrentChangeFPL(val) {
      this.reformPageFPL.page =val;
      this.loadFoodPackageLinkList();
    },


    handleSizeChangeFP(val) {
      this.reformPageFP.pageSize =val;
      this.loadFoodPackageList();
    },
    handleCurrentChangeFP(val) {
      this.reformPageFP.page =val;
      this.loadFoodPackageList();
    },

    openFoodPackageInfo(foodPackage){
      this.foodPackageInfoVisible = true;
      let url = 'http://localhost:8080/food-packages/link/food_package/' + foodPackage.id;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.foodPackageInfo = responseBody.data;
          console.log("查询的对象:{}",this.foodPackageInfo);

        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });
        }
      });
    },

    updateLinkForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-package-links/update';
          console.log('url = ' + url);
          let formData = this.qs.stringify(this.editLinkForm);
          console.log('formData = ' + formData);

          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.loadFoodPackageLinkList();
              this.dialogLinkVisible = false;
              this.$message({message: '修改套餐餐品关联成功！', type: 'success'});
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    openDeleteLinkConfirm(foodPackageLink){
      console.log(foodPackageLink);
      let message = '此操作将永久删除['+foodPackageLink.foodPackageName+']的餐品['+foodPackageLink.foodName+'】餐品，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteLink(foodPackageLink);
      }).catch(() => {
      });

    },
    openEditLinkDialog(foodPackageLink){
      this.dialogLinkVisible = true;
      let url = 'http://localhost:8080/food-package-links/' + foodPackageLink.id;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.editLinkForm = responseBody.data;
          console.log("修改的对象:{}",this.editLinkForm);

        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });
        }
      });

    },

    handleDeleteLink(foodPackageLink){
      console.log(foodPackageLink.id);
      let url = 'http://localhost:8080/food-package-links/' + foodPackageLink.id + "/delete";
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadFoodPackageLinkList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageLinkList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });

    },



    addNewsubmitLinkForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-package-links/add-new';
          console.log('url = ' + url);
          console.log('addNewForm={}', this.addNewLinkForm)
          let formData = this.qs.stringify(this.addNewLinkForm);
          console.log('formData = ' + formData);
          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '套餐餐品关联提交成功！',
                type: 'success'
              });
              this.resetForm(formName);
              this.loadFoodPackageLinkList();
              this.addNewFormLinkVisible=false;
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    loadFoodList(){
      let url = 'http://localhost:8080/foods/list';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.foodArr = responseBody.data;
        }
        console.log(this.foodArr)
      });
    },

    openAddNewLinkDialog(){
      this.addNewFormLinkVisible = true;
    },

    updateForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-packages/update';
          console.log('url = ' + url);
          let formData = this.qs.stringify(this.editForm);
          console.log('formData = ' + formData);

          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.loadFoodPackageList();
              this.dialogVisible = false;
              this.$message({message: '修改套餐成功！', type: 'success'});
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    openEditDialog(foodPackage){
      this.dialogVisible = true;
      let url = 'http://localhost:8080/food-packages/' + foodPackage.id;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.editForm = responseBody.data;
          console.log("修改的对象:{}",this.editForm);
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageList();
            }
          });
        }
      });
    },

    openDeleteConfirm(foodPackage){
      console.log(foodPackage);
      let message = '此操作将永久删除【' + foodPackage.name+ '】套餐，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(foodPackage);
      }).catch(() => {
      });
    },
    handleDelete(foodPackage){//套餐删除方法
      console.log(foodPackage);
      let url = 'http://localhost:8080/food-packages/' + foodPackage.id + "/delete";
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      )
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadFoodPackageList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadFoodPackageList();
            }
          });

        } else {
          this.$message.error(responseBody.message);
        }
      });
    },

    addNewsubmitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/food-packages/add-new';
          console.log('url = ' + url);
          console.log('addNewForm={}', this.addNewForm)
          let formData = this.qs.stringify(this.addNewForm);
          console.log('formData = ' + formData);
          this.axios.create(
              {
                headers:{
                  "Authorization":localStorage.getItem("jwt")
                }
              }
          )
              .post(url, formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$message({
                message: '套餐提交成功！',
                type: 'success'
              });
              this.resetForm(formName);
              this.addNewFormVisible=false;
              this.loadFoodPackageList();
            } else {
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    openAddNewDialog(){
      this.addNewFormVisible=true;
    },

    loadFoodPackageList(){
      let url = 'http://localhost:8080/food-packages/list-by-page?'+this.qs.stringify(this.reformPageFP);
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.totalFP = responseBody.data.total;
          this.foodPackageArr = responseBody.data.list;
        }
        console.log("套餐数组:{}",this.foodPackageArr)
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loadFoodPackageLinkList(){
      let url = 'http://localhost:8080/food-package-links/list-by-page?'+this.qs.stringify(this.reformPageFPL);;
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.totalFPL = responseBody.data.total;
          this.foodPackageLinkArr = responseBody.data.list;
        }
        console.log("套餐餐品关联数组:{}",this.foodPackageLinkArr)
      });
    },


  },
  mounted() {
    this.loadFoodPackageList();
    this.loadFoodPackageLinkList();
    this.loadFoodList();
  }


}
</script>

<style>
.el-table th.el-table__cell>.cell {
  /* display: inline-block; */
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
}

</style>